<template>
	<view class="box">
		<view class="title">下单日期</view>
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
			<view class="data">
				<view class="dataOne">起始日期{{date}}</view>
				<view>终止日期{{date}}</view>
			</view>
		</picker>
		<view class="bottom">
			<button form-type="submit" class="submit">重置</button>
			<button form-type="reset" class="reset">确定</button>
		</view>
	</view>
</template>

<script>
	function getDate(type) {
		const date = new Date();
	 
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	 
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	 
		return `${year}-${month}-${day}`;
	}
	export default {
		data(){
			return{
				date: getDate({
					format: true
				}),
				startDate: getDate('start'),
				endDate: getDate('end'),
			}
		},
		methods:{
			bindDateChange: function(e) {
				this.date = e.detail.value;
			}
		}
	}
</script>

<style>
	.box{background-color: #F2F4F8;box-sizing: border-box;height: 100vh;position: relative;}
	.title{padding: 15px 10px;}
	.data{display: flex;background-color: #fff;justify-content: space-between;height: 50px;padding: 10px 0;margin: 0 10px;border-radius: 10px;}
	.data view{width: 50%;text-align: center;color: #A6A6A6;line-height: 50px;}
	.dataOne{border-right: 2px solid #D8D8D8;}
	.bottom{background-color: #fff;display: flex;justify-content: space-between;padding: 8px 0 10px;position: absolute;bottom: 0;width: 100vw;}
	.submit{width: 44%;}
	.reset{color: #fff;width: 44%;background-image: linear-gradient(to right , #FF7A1F, #FF432C);}
</style>